import { Component } from 'react';
import { Navbar,Button,Icon,Popover, Menu, MenuItem, Divider } from '@blueprintjs/core';
import styles from './HeadNav.less';
import classNames from 'classnames';
import Local from '../../../utils/local';
import {loginOut} from '../../../api/sign';
import OldSearch from './system/OldSearch';
import AttrSetting from './system/AttrSetting';
import CompaireMap from './system/CompairMap';
import SeniorSearch from './system/SeniorSearch';
import Chart from './system/Chart';
import { updateState } from '../../../models/global';
import router from 'umi/router';

export default class HeadNav extends Component {
    constructor(props) {
        super(props);
		this.state = {
			modal: null
		}
    }

	openModal = (type) => {
		// console.log({type})
		this.setState({modal : type || null})
	}

	openSearchModal = (e) => {
		this.openModal("search")
	}

  openSSearchModal = (e) => {
    this.openModal("ssearch")
  }

  openChartModal = (e) => {
    this.openModal("chart")
  }

	openAttrSettingModal = (e) => {
		this.openModal("attrsetting")
	}

	openSyncMapModal = (e) => {

	}

	// 清除对比地图DIV和对象
    removeSyncMap = (mapResize) => {

		const {baiduMap, gaodeMap, tiandituMap, map} = this.props;
		if(baiduMap) {
			baiduMap.removeEventListener("moving", this.syncBaidu.bind(this));
			baiduMap.removeEventListener("zoomend", this.syncBaidu.bind(this));
		}
		if(tiandituMap) {
			tiandituMap.removeEventListener("move", this.syncTianditu.bind(this));
			tiandituMap.removeEventListener("zoomend", this.syncTianditu.bind(this));
		}
		if(gaodeMap) {
			gaodeMap.destroy();
		}
		updateState({baiduMap: null, gaodeMap: null, tiandituMap: null});
		[1,2,3].map((idx) => {
			const container = document.getElementById("mapContainer" + idx);
			container.innerHTML = "";
		});
		if(map && mapResize) {
			setTimeout(() => {
				map.resize();
			}, 100);
		}
	}


	initGaodeMap = (container) => {
		if(!container || !window.AMap) {
			updateState({gaodeMap: null});
			return;
		}
		const {gaodeMap, sync} = this.props;
		if(gaodeMap) return;
		const _gaodeMap = new AMap.Map(container, {
			resizeEnable: true, //是否监控地图容器尺寸变化
		});
		_gaodeMap.on("mousemove", function() {
			updateState({mouseInMap: "gaode"});
		});
		_gaodeMap.on("zoomend", function() {
			sync("gaode");
		});
		_gaodeMap.on("mapmove", function() {
			sync("gaode");
		});
		updateState({gaodeMap: _gaodeMap});
	}

	syncBaidu = () => {
		const {sync} = this.props;
		if(sync) {
			sync("baidu");
		}
	}

	syncTianditu = () => {
		const {sync} = this.props;
		if(sync) {
			sync("tianditu");
		}
	}

	initBaiduMap = (container) => {
		if(!container || !window.BMap) {
			updateState({baiduMap: null});
			return;
		}
		const {baiduMap, sync} = this.props;
		if(baiduMap) return;
		const _baiduMap = new BMap.Map(container);
		_baiduMap.enableScrollWheelZoom(true);
		const mapType = new BMap.MapTypeControl(
			{
				mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
				anchor: BMAP_ANCHOR_BOTTOM_RIGHT
			}
		);
		_baiduMap.addControl(mapType);
		_baiduMap.addEventListener("mousemove", () => {
			updateState({mouseInMap: "baidu"});
		});
		_baiduMap.addEventListener("moving", this.syncBaidu.bind(this));
		_baiduMap.addEventListener("zoomend", this.syncBaidu.bind(this));
		updateState({baiduMap: _baiduMap});
	}

	initTiandiTu = (container) => {
		if(!container || !window.T) {
			updateState({tiandituMap: null});
			return;
		}
		const {tiandituMap, sync} = this.props;
		if(tiandituMap) return;
		const _tiandituMap = new T.Map(container, {
			projection: 'EPSG:4326'
		});
		_tiandituMap.addEventListener("mousemove", function(e) {
			updateState({mouseInMap: "tianditu"});
		});
		_tiandituMap.addEventListener("move", this.syncTianditu.bind(this));
		_tiandituMap.addEventListener("zoomend", this.syncTianditu.bind(this));
		updateState({tiandituMap: _tiandituMap});
	}


	activateSyncMap = () => {
		this.removeSyncMap();
		const {syncMap, baiduMap, tiandituMap, gaodeMap, sync, map} = this.props;
		const syncMapSize = syncMap ? syncMap.length : 0;
		if(syncMap && syncMapSize > 0) {
			let flag = false;
			syncMap.map((map, idx) => {
				if(!baiduMap && map === "百度地图") {
					this.initBaiduMap("mapContainer" +(idx + 1));
					flag = true;
				}
				if(!gaodeMap && map === "高德地图") {
					this.initGaodeMap("mapContainer" +(idx + 1));
					flag = true;
				}
				if(!tiandituMap && map === "天地图") {
					this.initTiandiTu("mapContainer" +(idx + 1));
					flag = true;
				}
			});
			if(flag) {
				updateState({mouseInMap: "map"});
				map.resize();
				map.panBy([0,1]);
			}
		} else {
			this.removeSyncMap(true);
		}
	}


    render() {
		const {syncMap} = this.props;
		const {modal} = this.state;
			const menus = (<Menu>
					<MenuItem text="我的帐户" icon="user" disabled={true} />
					<MenuItem text="系统设置" icon="cog" disabled={true}  />
					{/* <MenuItem text="主题设置" icon="style" /> */}
					<MenuItem text="系统帮助" icon="help" disabled={true} />
					<MenuItem text="技术支持与联系" icon="phone" disabled={true} />
					<Divider />
					{/* <MenuItem text="退出" icon="log-out" onClick={loginOut} /> */}
			</Menu>);
			const system_menus = (
				<Menu className={styles.system_menu}>
					<MenuItem text="旧版查询" icon="geosearch" target="oldsearch"  onClick={this.openSearchModal}/>
          {/* <MenuItem text="高级查询" icon="path-search" target="s_search"  onClick={this.openSSearchModal}/> */}
          {/* <MenuItem text="综合报表" icon="chart" target="chart"  onClick={this.openChartModal}/> */}
					{/* <MenuItem text="属性配置" icon="contrast" target="attrsetting"  onClick={this.openAttrSettingModal}/> */}
					<MenuItem text="地图对比设置" icon="comparison" onClick={() => {
						this.setState({modal: 'compaire'})
					}}/>
					<MenuItem disabled={!syncMap} text="取消地图对比" icon="comparison" onClick={() => {
						this.removeSyncMap(true);
            updateState({rightPanPosition: 'right'});
						updateState({syncMap: null});
            $('.rightinfo-drag').draggabilly("disable")
					}}/>
				</Menu>
			)
			const userName = Local.get("name") || '';
			return (
					<Navbar className={styles.main}>
						<Navbar.Group>
							<Icon icon="path-search" iconSize = { 24 } style={{margin: "0 10px"}} />
							<Navbar.Heading><h1 style={{color:"#eeeeee"}}>场地调查修复一张图系统</h1></Navbar.Heading>
							{/* <Navbar.Divider /> */}
						</Navbar.Group>
						{
							userName && <Navbar.Group align={"right"}>
							<Popover content={menus} position="bottom">
								<Button minimal icon={<Icon icon="user" color="#ffffff" />}
								rightIcon={<Icon icon="caret-down" color="#ffffff" />} className={classNames(styles.headNavBtn, "text-overflow")} text={`欢迎您${userName && ("， " + userName)}`} />
							</Popover>
						</Navbar.Group>
						}
						{
							<Navbar.Group align={"right"}>
							{system_menus}
							{/* <Popover content={system_menus} position="bottom">
								<Button minimal icon={<Icon icon="wrench" color="#ffffff" />}
								rightIcon={<Icon icon="caret-down" color="#ffffff" />} className={classNames(styles.headNavBtn, "text-overflow")} text={"系统"} />
							</Popover> */}
						</Navbar.Group>
						}
						<OldSearch isOpen={this.state.modal === "search"} handleClose={this.openModal} />
						<AttrSetting isOpen={this.state.modal === "attrsetting"}  handleClose={this.openModal} />
						{ <CompaireMap isOpen={modal === 'compaire'} handleClose={this.openModal} handleOk={() => {
							this.openModal();
							setTimeout(() => {
								this.activateSyncMap();
							}, 200);
						}}/>}
            <SeniorSearch isOpen={this.state.modal === "ssearch"} handleOk={() => {
              updateState({sysType: 'ssearch'})
            }} handleClose={this.openModal} />
            <Chart isOpen={this.state.modal === "chart"}  handleClose={this.openModal} />
					</Navbar>
					)
    }
}
